<template>
    <el-dialog
    title="物料详情"
    :visible="isShow"
    width="40%"
    class="dialog"
    @close="$emit('close')"
    append-to-body
  >
    <div>
      <span>{{ product.type == 2 ? "参数" : "名称" }}：</span>{{ product.name }}
    </div>
    <!-- 器材 -->
    <template v-if="product.type == 1">
      <div>
        <span>类型：</span
        >{{
          product.category == 1
            ? "玻璃器皿"
            : product.category == 2
            ? "实验耗材"
            : product.category == 3
            ? "采样工具"
            : "仪器设备"
        }}
      </div>
      <!-- <div v-if="product.category==1"><span>规格：</span>{{ item.capacity }} mL</div> -->
      <div>
        <span>仓库：</span
        >{{
          product.storage == 1
            ? "器材室"
            : product.storage == 2
            ? "备品室"
            : "外业仓库"
        }}
      </div>
    </template>
    <template v-if="product.type == 2">
      <div><span>类别：</span>{{ product.category }}</div>
    </template>
    <template v-if="product.type == 3">
      <div><span>级别：</span>{{ product.grade }}</div>
      <div>
        <span>危险等级：</span
        >{{
          product.dangerClasses == 1
            ? "一般试剂(I)"
            : product.dangerClasses == 2
            ? "有机试剂(II)"
            : "剧毒试剂/易致毒试剂(III)"
        }}
      </div>
    </template>
    <div><span>库存：</span>{{ product.totalNum + totalUnit }}</div>
    <template v-if="product.type == 2">
      <div class="ingredient">
        <span>成分：</span>
        <table>
          <tr>
            <th>名称</th>
            <th>标准值</th>
            <th>不确定度</th>
            <th>单位</th>
          </tr>
          <tr v-for="(item, index) in product.ingredientData" :key="index">
            <td>{{ item.ingredientName }}</td>
            <td>{{ item.value }}</td>
            <td>{{ item.uncertainty }}</td>
            <td>{{ item.ingredientUnit }}</td>
          </tr>
        </table>
      </div>
    </template>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="changeChooseLise(product, 'add')">{{
        index === -1 ? "加入申请" : "取消申请"
      }}</el-button>
    </span>
    </el-dialog>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    product: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      index: null
    };
  },
  computed: {
    ...mapState("hjuser", ["chooseList"]),
    totalUnit() {
      if (this.product.type == 1) {
        if (this.product.unit == 1) {
          return "个";
        } else if (this.product.unit == 2) {
          return "台";
        } else if (this.product.unit == 3) {
          return "套";
        }
      }
      if (this.product.type == 2) {
        if (this.product.unit == 1) {
          return "支";
        } else if (this.product.unit == 2) {
          return "mL";
        }
      }
      if (this.product.type == 3) {
        if (this.product.unit == 3) {
          return "g";
        } else {
          return "mL";
        }
      }
    }
  },
  created() {
    this.index = this.chooseList.findIndex(
      item => item.index === this.product.index
    );
    if (this.product.ingredientData) {
      this.product.ingredientData = JSON.parse(this.product.ingredientData);
    }
  },

  methods: {
    changeChooseLise(val) {
      if (this.index === -1) {
        // val = { ...val, checked: false, count: 1 }
        val = {
          id: val.id,
          name: val.name,
          amount: val.amount,
          countType: val.countType,
          dangerClasses: val.dangerClasses || 888,
          labId: val.labId,
          cabinetId: val.cabinetId,
          num: val.countType == 1 ? 1 : 0.1,
          checked: false,
          totalNumber: val.totalNumber,
          index: val.index,
          disabled: false,
          type: val.type,
          unit: this.totalUnit,
          isAudit: val.isAudit,
          category: val.category || "11"
        };
        this.$store.commit("hjuser/updatedChooseList", [
          ...this.chooseList,
          val
        ]);
      } else {
        const data = JSON.parse(JSON.stringify(this.chooseList));
        data.splice(this.index, 1);
        this.$store.commit("hjuser/updatedChooseList", data);
      }

      this.$emit("close");
    }
  }
};
</script>

<style scoped lang="scss">
.dialog {
  & ::v-deep .el-dialog {
    border-radius: 8px;

    .el-dialog__body {
      > div {
        font-size: 16px;
        height: 35px;
        line-height: 35px;
        margin-bottom: 10px;
        font-size: 14px;
        span {
          display: inline-block;
          margin-right: 8px;
          width: 80px;
          text-align: right;
          color: #000;
          white-space: nowrap;
        }
      }
      .ingredient {
        height: inherit;
        table {
          margin-left: 15%;
          border: 1px solid #000;
          width: 80%;
          border-collapse: collapse;
          th,
          td {
            border: 1px solid #000;
            width: 25%;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
